<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 
                决定定位
                    position 设置为absolute
                    绝对定位特点
                        1.不设置偏移  元素位置不变
                        2.元素会在文档流脱离
                        3.绝对定位会改变元素性质 行内变成块  块的宽高被内容撑开
                        4.绝对定位会使元素提升层级
                        5.相对于其包含块定位决定
                    包含块：
                        - 正常
                            是 离元素最近的祖先-块-元素
                        -绝对定位的包含块
                            离他最近的开启了定位的祖先元素
                                不是默认值都是开启了定位
                            如果所有祖先都没定位 则根元素是他的包含块
                                根元素 - html
                            - html（根元素、初识包含块）
            */
            position:absolute;
            /* top: 0;
            left: 0; */
            bottom: 0;
            right: 0;

        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: rgb(255, 83, 83);
            /* position: relative; */
        }
        .box5{
            width: 300px;
            height: 300px;
            background-color: rgb(175, 175, 175);
        }

    </style>
</head>
     
        <div class="box1 " >1
            <!-- <span class="span1">123456</span>
            <span class="span2">saassa</span> -->
        </div>
        <div class="box4">4
            <div class="box5">5
                <div class="box2 ">2</div>
            </div>
        </div>
        <div class="box3">3
        </div>


    
</body>
</html>